<template>
  <div class="icon-title">
    <template v-if="props.icon">
      <i :class="`iconfont ${props.icon}`"></i>
      {{ props.title }}
    </template>
    <template v-else-if="props.image">
      <img v-lazy="props.image"
           class="img">
    </template>
  </div>
</template>

<script lang="ts"
        setup>
let props = defineProps<{
  icon?: string,
  image?: string,
  title?: string
}>()
</script>

<style lang="less"
       scoped>
.icon-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 92px;
  height: 92px;
  border: 1px solid #ededed;
  color: #999;
  cursor: pointer;

  &:hover {
    i {
      color: @xtxColor;
    }
  }

  i {
    font-size: 36px;
    color: #666;
  }

  img {
    width: 100%;
    height: 100%;
    padding: 7px;
  }
}
</style>